<template>
  <el-table
    :data="tableData"
    style="width: 100%">

    
    <el-table-column
      prop="companyLogo"
      label="图片"
      width="180">
      <template slot-scope="scope">
        <img style="width:100px" :src="scope.row.companyLogo"/>
        <!-- {{scope.row.companyLogo}} -->
      </template>
    </el-table-column>

    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>

    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <!-- <el-table-column
      label="操作"
      width="100">
      <template>
        <el-button @click="x">按钮</el-button>
        <span>文字</span>
      </template>
    </el-table-column> -->

    <el-table-column label="性别">
    <!-- 
    1. slot-scope是固定写法
    2. scope理解为变量，并不一定需要固定这个名字，
      el-table-column组件会自动将渲染本行需要的数据传给scope
      其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
    3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
    -->
      <template slot-scope="scope">
        <button @click="test(scope.row)">test</button>
        <!-- {{scope.row.gender ? '男' : '女'}} -->
        {{format(scope.row.gender)}}
      </template>
  </el-table-column>


  </el-table>
</template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            companyName: '小米',
            companyLogo: "http://s02.mifile.cn/assets/static/image/logo-mi2.png"
          }, 
          {
              companyName: '京东',
              companyLogo:"https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"
            }, 
            {
              companyName: '百度',
              companyLogo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
            }
          ]
          // tableData: [
          // {
          //   date: '2016-05-02',
          //   name: '王小虎',
          //   address: '上海市普陀区金沙江路 1518 弄',
          //   gender: 1 //男
          // }, 
          // {
          //   date: '2016-05-04',
          //   name: '王小虎',
          //   address: '上海市普陀区金沙江路 1517 弄',
          //   gender: 0 // 女
          // }, 
          
          // ]
        }
      },
      methods: {
        format(gender){
          if(gender === 1) {
            return '男生'
          } else if(gender === 0) {
            return '女士'
          } else {
            return '未知'
          }
        } ,
        test(row) {
          console.log(row)
        }
      },
    }
  </script>